/// <reference path="references.scss" />
/// <reference path="../lib/slick/slick.scss" />


// General
// ------------------------------------------------------

.slick-loading .slick-list {
    background: #fff url('images/loading.gif') center center no-repeat;
}

img.slick-loading {
    opacity: 0;
}


// Buttons
// ------------------------------------------------------

.gal-box {
    .slick-arrow,
    .gal-arrow {
        //font-size: 1.25rem;
    }
    
    .slick-arrow.slick-disabled,
    .gal-arrow.gal-disabled {
        opacity: 0.2;
        background: transparent !important;
        border-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        cursor: default;
    }

    .gal-nav .gal-arrow {
        line-height: 1;
        padding: 0;
        margin: 3px 0;
    }
}

.gal .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;

    &.slick-prev { inset-inline-start: 0; inset-inline-end: auto; }
    &.slick-next { inset-inline-start: auto; inset-inline-end: 0; }
}

.artlist-carousel {
    .no-touchevents .slick-slider.slick-dotted {
        padding-inline: 1rem;
    }

    .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 100;
        transition: opacity 0.2s linear;
        height: 6rem;
        line-height: 6rem;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

    .slick-slider:hover .slick-arrow {
        opacity: 1;
    }
    .slick-slider:hover .slick-arrow.slick-disabled {
        opacity: 0.4;
		background: #fff;
		border-color: $gray-400;
    }

    .slick-prev,
    .slick-next {
        border-radius: $btn-border-radius-lg;
    }

    .slick-prev { 
        inset-inline: 0 auto; 
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        border-inline-start-width: 0;
		border-inline-end-width: $btn-border-width;
        box-shadow: 1px 1px 3px rgba($black, 0.12);
    }

    .slick-next { 
        inset-inline: auto 0; 
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-inline-end-width: 0;
		border-inline-start-width: $btn-border-width;
        box-shadow: -1px 1px 3px rgba($black, 0.12);
    }

	[dir=rtl] & {
		.slick-prev { 
			box-shadow: -1px 1px 3px rgba($black, 0.12);
		}

		.slick-next { 
			box-shadow: 1px 1px 3px rgba($black, 0.12);
		}
	}

    .slick-arrow.slick-disabled {
        color: $gray-300 !important;
        cursor: default;
        box-shadow: none !important;
        border-color: $secondary !important;
    }
}

.touchevents .slick-arrow {
    display: none !important;
}

// Dots
// ------------------------------------------------------

.slick-dots {
    position: relative;
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding: 0.75rem 0.5rem;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 0;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 10px;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    outline: 0 none;
    padding: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: $gray-300;
    border: 1px solid $gray-500;
}

.slick-dots li.slick-active button {
    background: $gray-500;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-track {
    // Info: This hack fixes chrome calculation bug when using browser zoom.
    min-width: calc(100% + 1px);
}